<template>
  <div class="audition123">
    <p>试着点击下面的按钮，控制动画播放：</p>
    <div class="animation-control">
      <input type="radio" id="start" name="animation" />
      <label for="start">
        <span>开始播放</span>
      </label>
      <input type="radio" id="stop" name="animation" />
      <label for="stop">
        <span>停止播放</span>
      </label>
      <input type="radio" id="play" name="animation" />
      <label for="play">
        <span>继续播放</span>
      </label>
      <input type="radio" id="origin" name="animation" />
      <label for="origin">
        <span>返回起点</span>
      </label>
      <div class="show-animation"></div>
    </div>
    <p>----------------------------------------</p>
    <p>示例代码：</p>
    <v-md-preview :text="text1" />
  </div>
</template>

<script>
const prefix = '``` html'
const suffix = '```'
export default {
  name: 'Audition123',
  data() {
    return {
      text1: `${prefix}
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          @keyframes move {
            0% { margin-left: 0;}
            100% {margin-left: 800px;}
          }
          @keyframes origin {
            0% {margin-left: 0;}
            0% {margin-left: 0;}
          }
          .show-animation {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation: move 10s linear infinite paused;
          }
          #start:checked ~ .show-animation {
            animation-play-state: running;
          }
          #stop:checked ~ .show-animation {
            animation-play-state: paused;
          }
          #play:checked ~ .show-animation {
            animation-play-state: running;
          }
          #origin:checked ~ .show-animation {
            animation: origin 0;
          }
          input {
            display: none;
          }
          label span {
            display: inline-block;
            box-sizing: border-box;
            padding: 3px 5px;
            border: 1px solid #333;
            border-radius: 6px;
            margin-left: 5px;
            cursor: pointer;
          }
        </style>
      </head>
      <body>
        <input type="radio" id="start" name="animation" />
        <label for="start">
          <span>开始播放</span>
        </label>
        <input type="radio" id="stop" name="animation" />
        <label for="stop">
          <span>停止播放</span>
        </label>
        <input type="radio" id="play" name="animation" />
        <label for="play">
          <span>继续播放</span>
        </label>
        <input type="radio" id="origin" name="animation" />
        <label for="origin">
          <span>返回起点</span>
        </label>
        <div class="show-animation"></div>
      </body>
      </html>
      \n${suffix}`,
    }
  }
}
</script>

<style lang="less" scoped>
.animation-control {
  @keyframes move {
    0% { margin-left: 0;}
    100% {margin-left: 800px;}
  }
  @keyframes origin {
    0% {margin-left: 0;}
    0% {margin-left: 0;}
  }
  .show-animation {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: move 10s linear infinite paused;
  }
  #start:checked ~ .show-animation {
    animation-play-state: running;
  }
  #stop:checked ~ .show-animation {
    animation-play-state: paused;
  }
  #play:checked ~ .show-animation {
    animation-play-state: running;
  }
  #origin:checked ~ .show-animation {
    animation: origin 0;
  }
  input {
    display: none;
  }
  label span {
    display: inline-block;
    box-sizing: border-box;
    padding: 3px 5px;
    border: 1px solid #333;
    border-radius: 6px;
    margin: 5px;
    cursor: pointer;
  }
}
</style>